import React, { Component } from "react";
import "../../css/login/login.css";
import { Form, Icon, Input, Button, Spin } from "antd";
import { connect } from "react-redux";
import { isButtonShow, login } from "../../actions/Login/index";
import loginBg from "../../images/login.jpg";
let url = "cook/query?&menu=%E8%A5%BF%E7%BA%A2%E6%9F%BF&rn=10&pn=3";
const FormItem = Form.Item;
class Login extends Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    // To disabled submit button at the beginning.
  }
  hasErrors = fieldsError => {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // this.props.history.push("/home");
        this.props.login(values, this.props.history);
      }
    });
  };
  render() {
    let loadButton = null;
    const {
      getFieldDecorator,
      getFieldsError,
      getFieldError,
      isFieldTouched
    } = this.props.form;
    const userNameError =
      isFieldTouched("userName") && getFieldError("userName");
    const passwordError =
      isFieldTouched("password") && getFieldError("password");
    if (!this.props.loginIndex.isLoading) {
      loadButton = (
        <Button
          type="primary"
          htmlType="submit"
          disabled={this.hasErrors(getFieldsError())}
          className="login-form-button"
        >
          登陆
        </Button>
      );
    } else {
      loadButton = (
        <Button className="login-form-button" type="primary" loading>
          登陆
        </Button>
      );
    }
    return (
      <div className="page">
        <div className="login">
          <img src={loginBg} className="login_img" />
          <div className="login_content display">
            <div className="login_input">
              <Form onSubmit={this.handleSubmit}>
                <FormItem
                  validateStatus={userNameError ? "error" : ""}
                  help={userNameError || ""}
                >
                  {getFieldDecorator("userName", {
                    rules: [{ required: true, message: "请输入用户名！" }]
                  })(
                    <Input
                      className="input_name"
                      prefix={<Icon type="user" style={{ fontSize: 13 }} />}
                      placeholder="请输入用户名"
                    />
                  )}
                </FormItem>

                <FormItem
                  validateStatus={passwordError ? "error" : ""}
                  help={passwordError || ""}
                >
                  {getFieldDecorator("password", {
                    rules: [{ required: true, message: "请输入密码！" }]
                  })(
                    <Input
                      prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
                      type="password"
                      placeholder="请输入密码"
                    />
                  )}
                </FormItem>
                <div className="display">{loadButton}</div>
              </Form>
            </div>
          </div>
          <div className="login_bom display">2222</div>
        </div>
      </div>
    );
  }
}
/*根据 action reduces store 期望映射到当前展示组件的porps中

 * 例如在这里 我们期望返回一个loginIndex对象 根据loginIndex里面
 * 的一个isLoading字段来判断是否显示转圈*/
const mapStateToProps = state => {
  return {
    loginIndex: state.loginIndex
  };
};
/*接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法
 * 例如在这里我们期望的是用户点击登陆按钮过后能调用isButtonShow方法把
 * isLoading字段传过去并且修改全局state的isLoading为true状态*/
const mapDispatchToProps = dispatch => {
  return {
    isButtonShow: isLoading => {
      dispatch(isButtonShow(isLoading));
    },
    login: (data, history) => {
      dispatch(login(data, history));
    }
  };
};
const WrappedHorizontalLoginForm = Form.create()(Login);
Login = connect(
  mapStateToProps,
  mapDispatchToProps
)(WrappedHorizontalLoginForm);
export default Login;
